<template>
    <div>
        <div id="divPlugin" class="plugin" style=" width: 1114px; height:664px;">
        </div>
        <!-- <div>
        <el-button @click="clickGetDeviceInfo()">获取信息</el-button>
        <el-button @click="login()">登录</el-button>
        <el-button @click="clickStartRealPlay()">预览</el-button>
    </div> -->
    </div>

</template>
<script setup lang="ts">
import { onMounted, ref, reactive, defineExpose } from 'vue'
// 全局保存当前选中窗口
var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
//  定义变量
let szIP = '192.168.1.32'
let szPort = '80'
let szUsername = 'admin'
let szPassword = 'tlhy7766'
let szDeviceIdentify = szIP + "_" + szPort   //设备唯一标识
let iRtspPort = 0 //RTSP端口
let iChannelID = 1 // 数字通道id
let iStreamType = 1 //码流类型，主码流  

const emit = defineEmits(['getDeviceInfo'])
// 页面
onMounted(() => { 

    init()
})
// 初始化
function init() {
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
            g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
            var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
            var szInfo = "当前放大的窗口编号：" + iWndIndex;
            if (!bFullScreen) {
                szInfo = "当前还原的窗口编号：" + iWndIndex;
            }
        },

        cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
                // 检查插件是否最新
                WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                    if (bFlag) {
                        alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
                    }
                });
                clickLogin()
            }, () => {
                alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
            });
        }
    });
}
// 登录
function clickLogin() {

    WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
        timeout: 3000,
        success: function (xmlDoc) {
            console.log(szDeviceIdentify + " 登录成功！");
            WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
                iRtspPort = oPort.iRtspPort;
                clickStartRealPlay()
                clickGetDeviceInfo()
                // console.log(szDeviceIdentify + " 获取端口成功！");
            }, (oError) => {
                var szInfo = "获取端口失败！";
                console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
            });
        }
    });
}

// 获取设备信息
function clickGetDeviceInfo() {
    // console.log('获取设备信息');


    if (null == szDeviceIdentify) {
        return;
    }
    WebVideoCtrl.I_GetDeviceInfo(szDeviceIdentify, {
        success: function (xmlDoc) {
            // var arrStr = [];
            // arrStr.push("设备名称：" + $(xmlDoc).find("deviceName").eq(0).text() + "\r\n");
            // arrStr.push("设备ID：" + $(xmlDoc).find("deviceID").eq(0).text() + "\r\n");
            // arrStr.push("型号：" + $(xmlDoc).find("model").eq(0).text() + "\r\n");
            // arrStr.push("设备序列号：" + $(xmlDoc).find("serialNumber").eq(0).text() + "\r\n");
            // arrStr.push("MAC地址：" + $(xmlDoc).find("macAddress").eq(0).text() + "\r\n");
            // arrStr.push("主控版本：" + $(xmlDoc).find("firmwareVersion").eq(0).text() + " " + $(xmlDoc).find("firmwareReleasedDate").eq(0).text() + "\r\n");
            // arrStr.push("编码版本：" + $(xmlDoc).find("encoderVersion").eq(0).text() + " " + $(xmlDoc).find("encoderReleasedDate").eq(0).text() + "\r\n");
            // console.log($(xmlDoc).find("deviceName").eq(0).text() + "\r\n",'-------设备名称：----------------');
            emit('getDeviceInfo', $(xmlDoc).find("deviceName").eq(0).text() + "\r\n")
            // console.log(szDeviceIdentify + " 获取设备信息成功！"); 
            // alert(arrStr.join(""));
        },
        error: function (oError) {
            console.log(szDeviceIdentify + " 获取设备信息失败！", oError.errorCode, oError.errorMsg);
        }
    });
}


// 开始预览
function clickStartRealPlay() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
        bZeroChannel = false,
        szInfo = "";

    if (null == szDeviceIdentify) {
        return;
    }
    var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iStreamType: iStreamType,
            iChannelID: iChannelID,
            bZeroChannel: bZeroChannel,
            success: function () {
                szInfo = "开始预览成功！";
                // console.log(szDeviceIdentify + " " + szInfo);
            },
            error: function (oError) {
                console.log(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg, iStreamType, iChannelID);
            }
        });
    };

    if (oWndInfo != null) { // 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: function () {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}

// 停止预览并退出
function clickStopRealPlay() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
        szInfo = "";

    if (oWndInfo != null) {
        WebVideoCtrl.I_Stop({
            success: function () {
                szInfo = "停止预览成功！";
                // console.log(oWndInfo.szDeviceIdentify + " " + szInfo);

            },
            error: function (oError) {
                console.log(szDeviceIdentify + " 停止预览失败！", oError.errorCode, oError.errorMsg);
            }
        });
    }
    if (null == szDeviceIdentify) {
        return;
    }
    WebVideoCtrl.I_Logout(szDeviceIdentify).then(() => {
        // console.log(szDeviceIdentify + " " + "退出成功！");
        WebVideoCtrl.I_DestroyPlugin()
    }, () => {
        console.log(szDeviceIdentify + " " + "退出失败！");
    });
}


defineExpose({ clickStopRealPlay });
</script>
<style lang="less" scoped></style>